<template>
    <div>
      <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!-- 收入月报表（开始） -->
          <el-tab-pane label="收入月报表" name="first">
            <div>
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div>
                <!-- <div class="money-span">
                  
                </div> -->
                <div>
                  <table class="money-table" cellspacing="0">
                    <tr>
                      <td colspan="3">
                        <span style="margin-left: 200px;">收入月报表</span>
                        <el-button type="primary" round style="margin-left: 200px;">打印</el-button>
                        <el-button type="primary" round>导出</el-button>
                      </td>
                    </tr>
                    <tr>
                      <td rowspan="4" class="money-td0">医养照护中心收入</td>
                      <td class="money-td1">类别</td>
                      <td class="money-td2">金额</td>
                    </tr>
                    <tr>
                      <td>床位护照费</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>特殊护理费</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>合计</td>
                      <td></td>
                    </tr>
                  </table>
                </div>
                <br />
              </div>
            </div>
          </el-tab-pane>
  
          <!-- 收入月报表（结束） -->
          <!-- 现况结算总表 (开始)-->
          <el-tab-pane label="现款结算总表" name="second">
            <div>
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div>
                <div class="money-span">
                  <span>统计时间：2022年9月~2022年9月</span> <span>单元：元</span>
                </div>
                <div>
                  <table class="money-table" cellspacing="0">
                    <tr>
                      <td rowspan="4" class="money-td0">医养照护中心收入</td>
                      <td class="money-td1">类别</td>
                      <td class="money-td2">金额</td>
                    </tr>
                    <tr>
                      <td>床位护照费</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>特殊护理费</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>合计</td>
                      <td></td>
                    </tr>
                  </table>
                </div>
                <el-button type="primary" class="button1" round>导出</el-button>
                <br />
                <el-button type="primary" class="button2" round>打印</el-button>
              </div>
            </div>
          </el-tab-pane>
          <!-- 现况结算总表 (结束)-->
          <!-- 现况收支明细（开始） -->
          <el-tab-pane label="现款收支明细表" name="third">
            <div>
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div>
                <table class="show-table" cellspacing="0">
                  <tr>
                    <td colspan="11">现款收支明细表</td>
                  </tr>
                  <tr>
                    <td colspan="11">
                      <div>
                        <span>统计时间：2022年9月~2022年9月</span>
                        <span>单元：元</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>操作员</td>
                    <td>类别</td>
                    <td class="td-1">3</td>
                    <td>张数</td>
                    <td>现金</td>
                    <td>银行卡</td>
                    <td>微信</td>
                    <td>支付宝</td>
                    <td>支票</td>
                    <td>其他</td>
                    <td>预交金退票号</td>
                  </tr>
                  <tr>
                    <td rowspan="4">王璐1245</td>
                    <td>床位照护费</td>
                    <td>收</td>
                    <td>3</td>
                    <td>7006</td>
                    <td>14680</td>
                    <td></td>
                    <td>9295</td>
                    <td></td>
                    <td></td>
                    <td rowspan="2"></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>退</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>医疗储备金</td>
                    <td>收</td>
                    <td>3</td>
                    <td>1000</td>
                    <td>5000</td>
                    <td></td>
                    <td>5000</td>
                    <td></td>
                    <td></td>
                    <td rowspan="2"></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>退</td>
                    <td>3</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td rowspan="4">张敏12454</td>
                    <td rowspan="2">床位护照费</td>
                    <td>收</td>
                    <td>3</td>
                    <td>9295</td>
                    <td>17340</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td rowspan="2"></td>
                  </tr>
                  <tr>
                    <td>退</td>
                    <td>3</td>
                    <td>6666.7</td>
                    <td>6000.04</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td rowspan="2">医疗储备金</td>
                    <td>收</td>
                    <td>3</td>
                    <td>16000</td>
                    <td>5000</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td rowspan="2"></td>
                  </tr>
                  <tr>
                    <td>退</td>
                    <td>2</td>
                    <td>2816.32</td>
                    <td>2.4</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td rowspan="2">合计</td>
                    <td>床位合计费</td>
                    <td colspan="4">4545.12</td>
                    <td rowspan="2">预交金总金额</td>
                    <td rowspan="2" colspan="4">111254</td>
                  </tr>
                  <tr>
                    <td>医疗储备金</td>
                    <td colspan="4">124.23</td>
                  </tr>
                </table>
              </div>
            </div>
            <!-- 现款收支明细（结束） -->
          </el-tab-pane>
          <!-- 预交金收支清单（开始） -->
          <el-tab-pane label="预交金收支清单" name="fourth">
            <div>
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div>
                <table class="zhi-table" cellspacing="0">
                  <tr>
                    <td colspan="13" class="tdflex">
                      预交金收支清单
                      <el-button type="primary" class="buttonright" round
                        >打印</el-button
                      ><el-button type="primary" class="buttonright" round
                        >导出</el-button
                      >
                    </td>
                  </tr>
                  <tr>
                    <td>时间</td>
                    <td>姓名</td>
                    <td>入住号</td>
                    <td>流水号</td>
                    <td>交款金额</td>
                    <td>交款方式</td>
                    <td>银行卡号</td>
                    <td>订单号</td>
                    <td>退款金额</td>
                    <td>退款方式</td>
                    <td>银行卡号</td>
                    <td>订单号</td>
                    <td>操作员</td>
                  </tr>
                  <tr>
                    <td>2022-09-30 08:12:12</td>
                    <td>李建刚</td>
                    <td>122121212</td>
                    <td>21212121212</td>
                    <td>11</td>
                    <td>微信</td>
                    <td>1</td>
                    <td>1</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>香香</td>
                  </tr>
                  <tr>
                    <td>2022-09-30 08:12:12</td>
                    <td>李建刚</td>
                    <td>122121212</td>
                    <td>21212121212</td>
                    <td>11</td>
                    <td>支付宝</td>
                    <td>1</td>
                    <td>1212</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>李铁刚</td>
                  </tr>
                  <tr>
                    <td>合计</td>
                    <td colspan="12" class="buttom-td">22</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-tab-pane>
          <!-- 预交金收支清单（结束） -->
          <!-- 结算退补清单（开始） -->
          <el-tab-pane label="结算退补清单" name="fiveth">
            <div>
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div>
                <table class="zhi-table" cellspacing="0">
                  <tr>
                    <td colspan="13" class="tdflex">
                      结算退补清单
                      <el-button type="primary" class="buttonright" round
                        >打印</el-button
                      ><el-button type="primary" class="buttonright" round
                        >导出</el-button
                      >
                    </td>
                  </tr>
                  <tr>
                    <td>时间</td>
                    <td>姓名</td>
                    <td>入住号</td>
                    <td>流水号</td>
                    <td>交款金额</td>
                    <td>交款方式</td>
                    <td>银行卡号</td>
                    <td>订单号</td>
                    <td>退款金额</td>
                    <td>退款方式</td>
                    <td>银行卡号</td>
                    <td>订单号</td>
                    <td>操作员</td>
                  </tr>
                  <tr>
                    <td>2022-09-30 08:12:12</td>
                    <td>李建刚</td>
                    <td>122121212</td>
                    <td>21212121212</td>
                    <td>11</td>
                    <td>微信</td>
                    <td>1</td>
                    <td>1</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>香香</td>
                  </tr>
                  <tr>
                    <td>2022-09-30 08:12:12</td>
                    <td>李建刚</td>
                    <td>122121212</td>
                    <td>21212121212</td>
                    <td>11</td>
                    <td>支付宝</td>
                    <td>1</td>
                    <td>1212</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>李铁刚</td>
                  </tr>
                  <tr>
                    <td>合计</td>
                    <td colspan="12" class="buttom-td">22</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-tab-pane>
          <!-- 结算退补清单（结束） -->
          <!-- 医疗储备金消费明细（开始） -->
          <el-tab-pane label="医疗储备金消费明细" name="sixth">
            <div>
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div>
                <table class="show-table" cellspacing="0">
                  <tr>
                    <td colspan="11">医疗储备金消费明细</td>
                  </tr>
                  <tr>
                    <td colspan="11">
                      <div>
                        <span>统计时间：2022年9月~2022年9月</span>
                        <span>单元：元</span>
                        <el-button type="primary" round>Primary</el-button>
                        <el-button type="primary" round>Primary</el-button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td rowspan="2">入住号</td>
                    <td rowspan="2">姓名</td>
                    <td rowspan="2">交款方式</td>
                    <td colspan="6">门诊</td>
                    <td rowspan="2">特殊护理</td>
                    <td rowspan="2">医疗费合计</td>
                  </tr>
                  <tr>
                    <td>西药</td>
                    <td>中成药</td>
                    <td>检验</td>
                    <td>检查</td>
                    <td>一般护理</td>
                    <td>合计</td>
                  </tr>
                  <tr>
                    <td rowspan="2">123123123123</td>
                    <td rowspan="2">陈秀杰</td>
                    <td>储备金</td>
                    <td>41.82</td>
                    <td>0</td>
                    <td>1258.3</td>
                    <td>100</td>
                    <td>0</td>
                    <td>937.56</td>
                    <td>4512.1</td>
                    <td>1357.12</td>
                  </tr>
                  <tr>
                    <td>医保</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                  </tr>
                  <tr>
                    <td rowspan="2">123123123123</td>
                    <td rowspan="2">陈秀杰</td>
                    <td>储备金</td>
                    <td>41.82</td>
                    <td>0</td>
                    <td>1258.3</td>
                    <td>100</td>
                    <td>0</td>
                    <td>937.56</td>
                    <td>4512.1</td>
                    <td>1357.12</td>
                  </tr>
                  <tr>
                    <td>医保</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                  </tr>
                  <tr>
                    <td rowspan="2">123123123123</td>
                    <td rowspan="2">陈秀杰</td>
                    <td>储备金</td>
                    <td>41.82</td>
                    <td>0</td>
                    <td>1258.3</td>
                    <td>100</td>
                    <td>0</td>
                    <td>937.56</td>
                    <td>4512.1</td>
                    <td>1357.12</td>
                  </tr>
                  <tr>
                    <td>医保</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                  </tr>
                  <tr>
                    <td rowspan="2">123123123123</td>
                    <td rowspan="2">陈秀杰</td>
                    <td>储备金</td>
                    <td>41.82</td>
                    <td>0</td>
                    <td>1258.3</td>
                    <td>100</td>
                    <td>0</td>
                    <td>937.56</td>
                    <td>4512.1</td>
                    <td>1357.12</td>
                  </tr>
                  <tr>
                    <td>医保</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
  
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                  </tr>
                  <tr>
                    <td colspan="11" class="tdd">总金额：1234</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-tab-pane>
          <!-- 医疗储备金消费明细（结束） -->
          <!-- 长者费用统计表（开始） -->
          <el-tab-pane label="长者费用统计表" name="seventh">
            <div>
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div>
                <table class="money-table1" cellspacing="0;">
                  <tr style="height: 80px">
                    <td colspan="9">
                      <span style="margin-left: 400px">工作量统计表</span>
                      <el-button type="primary" round style="margin-left: 300px"
                        >打印</el-button
                      >
                      <el-button type="primary" round>导出</el-button>
                    </td>
                  </tr>
                  <tr style="height: 60px">
                    <td colspan="9">
                      <span style="margin-right: 800px"
                        >统计时间：2022年9月-2022年9月</span
                      >
                      <span>单元位</span>
                    </td>
                  </tr>
                  <tr>
                    <td rowspan="2">入住者姓名</td>
                    <td rowspan="2">在院天数</td>
                    <td rowspan="2">在院情况</td>
                    <td colspan="5">入院长者本期费用</td>
                    <td rowspan="2">备注</td>
                  </tr>
                  <tr>
                    <td>床位费</td>
                    <td>照护费</td>
                    <td>特殊护理费</td>
                    <td>医疗费</td>
                    <td>费用合计</td>
                  </tr>
                  <tr>
                    <td>石尹秀</td>
                    <td>12</td>
                    <td>入院中</td>
                    <td>41</td>
                    <td>4213</td>
                    <td>3234</td>
                    <td>300</td>
                    <td>9871</td>
                    <td></td>
                  </tr>
                </table>
              </div>
            </div>
          </el-tab-pane>
          <!-- 长者费用统计表（结束） -->
          <el-tab-pane label="账户交易记录" name="eighth">
            <div>
              <div class="money-time8">
                <span>老人姓名：</span>
                <el-input
                  placeholder="单行输入"
                  style="width: 200px; magin-left: 100px"
                />
                <span>账户类型：</span>
                <el-select placeholder="全部" style="width: 200px">
                  <el-option />
                </el-select>
                <span>交易类型：</span>
                <el-select placeholder="全部" style="width: 200px">
                  <el-option />
                </el-select>
              </div>
  
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div class="show-table8">
                <el-button type="primary" round>完成收费打印</el-button>
                <el-button type="primary" round>导出</el-button>
              </div>
              <div>
                <table class="money-table" cellspacing="0;">
                  <tr>
                    <td>全选</td>
                    <td>姓名</td>
                    <td>交易单号</td>
                    <td>交易类型</td>
                    <td>交易金额</td>
                    <td>医保支付总额</td>
                    <td>交易方式</td>
                    <td>银行卡号</td>
                    <td>账户类型</td>
                    <td>账户余额</td>
                    <td>返款原因</td>
                    <td>交易时间</td>
                    <td>操作人</td>
                    <td>备注</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" /></td>
                    <td>石尹秀</td>
                    <td>123123123123</td>
                    <td>充值</td>
                    <td>11</td>
                    <td>11</td>
                    <td>现金</td>
                    <td>123123123123</td>
                    <td>医疗储备金</td>
                    <td>11</td>
                    <td>11</td>
                    <td>2022-09-09</td>
                    <td>陈秀杰</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" /></td>
                    <td>石尹秀</td>
                    <td>123123123123</td>
                    <td>充值</td>
                    <td>11</td>
                    <td>11</td>
                    <td>现金</td>
                    <td>123123123123</td>
                    <td>医疗储备金</td>
                    <td>11</td>
                    <td>11</td>
                    <td>2022-09-09</td>
                    <td>陈秀杰</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="工作量统计表" name="nineth">
            <div>
              <div class="money-time">
                开始时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                结束时间
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
                <el-button type="primary" round>查询</el-button>
              </div>
              <div>
                <table class="money-table1" cellspacing="0;">
                  <tr style="height: 80px">
                    <td colspan="9">
                      <span style="margin-left: 400px">工作量统计表</span>
                      <el-button type="primary" round style="margin-left: 300px"
                        >打印</el-button
                      >
                      <el-button type="primary" round>导出</el-button>
                    </td>
                  </tr>
                  <tr style="height: 80px">
                    <td colspan="9">
                      <span style="margin-right: 800px"
                        >统计时间：2022年9月-2022年9月</span
                      >
                      <span>单元位</span>
                    </td>
                  </tr>
                  <tr>
                    <td rowspan="2" class="money-td0" style="width: 150px">
                      操作员
                    </td>
                    <td class="money-td1" colspan="2">充值</td>
                    <td class="money-td2" colspan="2">结算</td>
                    <td class="money-td2" colspan="2">退票</td>
                    <td class="money-td2" colspan="2">合计</td>
                  </tr>
                  <tr>
                    <td>笔数</td>
                    <td>金额</td>
                    <td>笔数</td>
                    <td>金额</td>
                    <td>笔数</td>
                    <td>金额</td>
                    <td>笔数</td>
                    <td>金额</td>
                  </tr>
                  <tr>
                    <td>工作人</td>
                    <td>合计</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>合计</td>
                    <td>3</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <router-view></router-view>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from "vue";
  const size = ref<"default" | "large" | "small">("default");
  
  const value1 = ref("");
  const value2 = ref("");
  const activeName = ref("first");
  
  const handleClick = (tab: any, event: any) => {
    console.log(tab, event);
  };
  </script>
  
  <style lang="scss" scoped>
  .tdd {
    height: 50px;
    line-height: 50px;
    text-align: right;
  }
  .buttom-td {
    text-align: left;
  }
  .zhi-table {
    width: 1000px;
    height: 400px;
    margin-left: 70px;
  }
  
  .show-table {
    width: 1000px;
    height: 600px;
    margin-left: 70px;
  }
  .td-1 {
    width: 70px;
  }
  
  .button1 {
    margin-left: 1000px;
    margin-top: 40px;
  }
  .button2 {
    margin-left: 800px;
    margin-top: 100px;
  }
  .money-span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 100px;
    margin-left: 80px;
  }
  .money-td1 {
    width: 400px;
  }
  td {
    text-align: center;
  }
  .money-td2 {
    width: 400px;
  }
  .money-time {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 300px;
    margin-left: 40px;
  }
  .money-table {
    width: 1000px;
    height: 250px;
    margin-left: 70px;
    border: 1px black solid;
    text-align: center;
  }
  
  td {
    border: 1px black solid;
  }
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: black;
    font-size: 32px;
    font-weight: 600;
  }
  // 账户交易记录
  .money-time8 {
    margin-left: 38px;
    height: 50px;
    width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .show-table8 {
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
  }
  // 工作量统计表
  
  .money-table1 {
    width: 1100px;
    height: 350px;
    margin-left: 70px;
    border: 1px white solid;
    text-align: center;
  }
  // 工作量统计表
  </style>